<script>
/*****************************************
 * Contacts
 *****************************************/
function setContacts(){
	$("#btnGetOne").click(onClickOneContact);
	$("#btnGetAll").click(onClickAllContacts);
	
	//Set second tab as active
	lg.tabs.select(2);
	
	//Set listener
	lg.bind('lg_contacts', getContacts);
}
function onClickAllContacts(e) {
	e.preventDefault();
	lg.contacts.all();
}
function onClickOneContact(e) {
	e.preventDefault();
	lg.contacts.search('hig');
}
function getContacts(e){
	$("#num_contacts").html(lg.contacts.list.length);
	$("#firstname").html(lg.contacts.list[0].firstName);
	$("#lastname").html(lg.contacts.list[0].lastName);
	$("#phone").html(lg.contacts.list[0].phone[0].value);
	$("#email").html(lg.contacts.list[0].email[0].value);
	$("#street").html(lg.contacts.list[0].address[0].street);
	$("#city").html(lg.contacts.list[0].address[0].city);
	$("#state").html(lg.contacts.list[0].address[0].state);
	$("#zip").html(lg.contacts.list[0].address[0].zip);
}
</script>

<h1>Contacts</h1>

<div class="desc">Get access to all the contacts located on the device. You may also get
contacts filtered by attributes such as name, email, phone, etc. In the example below
A count of all your contacts is displayed as well as the details for the first contact.
Only four of the detail attributes are listed. Many more can be accessed.</div>

<p><b>Total Number of Contacts:</b> <span id="num_contacts"></span></p>

<ul>
  <li><b>Name: </b><span id="firstname"></span> <span id="lastname"></span></li>
  <li><b>Email: </b><span id="email"></span></li>
  <li><b>Phone: </b><span id="phone"></span></li>
  <li><b>Address: </b><span id="street"></span>, <span id="city"></span>, <span id="state"> <span id="zip"></span></span></li>
</ul>

<a href="#" id="btnGetAll" class="button">Get All</a>
<a href="#" id="btnGetOne" class="button">Search 'Hig*'</a>